<template>
    <layout />
</template>

<script>
    import {on} from '@/utils/dom';
    import Layout from '@/views/layout';
    export default {
        components: {Layout},
        data () {
            return {};
        },

        created () {
            this.baseVal = 750;
            this.rem(100);
            on(window, 'resize', this.resizeFn);
        },

        methods: {
            rem (n) {
                let r = document.documentElement.clientWidth;
                if (r >= 768) {
                    r = 768;
                }
                // document.documentElement.style.fontSize = (r * 100 / (this.baseVal * n)) + 'px';
                document.documentElement.style.fontSize = n * r / this.baseVal + 'px';
            },
            resizeFn () {
                clearTimeout(this.remTimer);
                this.remTimer = setTimeout(() => {
                    this.rem(100);
                }, 300);
            }
        }
    };
</script>
<style lang="scss">
@import './assets/scss/_styles.scss';
</style>
